<template>
  <div class="index-container">
    <div class="brief-container">
      <BriefIntro />
      <BaseInfo />
      <MyWork />
      <MyProject />
      <MySkills />
      <MyCert />
      <OtherEvaluation />
      <!-- <ContactMe /> -->
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, nextTick } from 'vue';
import BriefIntro from "./components/BriefIntro.vue";
import BaseInfo from "./components/BaseInfo.vue";
import MyWork from "./components/MyWork.vue";
import MyProject from "./components/MyProject.vue";
import MyCert from "./components/MyCert.vue";
import MySkills from "./components/MySkills.vue";
import OtherEvaluation from "./components/OtherEvaluation.vue";
import ContactMe from "./components/ContactMe.vue";

onMounted(() => {
  // 使用nextTick确保DOM已完全渲染
  nextTick(() => {
    // 创建Intersection Observer实例
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          // 当元素进入视窗时，添加动画类
          entry.target.classList.add('animate-in');
        } else {
          // 当元素离开视窗时，移除动画类，以便下次进入时可以再次播放
          entry.target.classList.remove('animate-in');
        }
      });
    }, {
      threshold: 0.1 // 当10%的元素可见时触发
    });

    // 观察所有标题容器
    const titleContainers = document.querySelectorAll('.module-title-container');
    titleContainers.forEach(container => {
      observer.observe(container);
    });
  });
});
</script>

<style lang="scss">
.module-title-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-bottom: 20px;

  .module-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-family: "SourceHanSansCN-Heavy", sans-serif;
    color: #1d2129;
    margin-bottom: 10px;
    position: relative;
    text-align: justify;
    letter-spacing: 0.2em;
    opacity: 0;
    transform: scale(0.8);
    z-index: 10;

    &::after {
      position: absolute;
      left: calc(50% - 25px);
      bottom: -20px;
      content: "";
      display: inline-block;
      width: 50px;
      height: 4px;
      background-color: #165dff;
    }
  }

  .module-subtitle {
    color: #666;
    margin-bottom: 10px;
    position: relative;
    text-align: justify;
    font-size: 16px;
    opacity: 0;
    transform: scale(0.8);
    animation-delay: 1s;
  }
  
  // 当元素进入视窗时添加的动画类
  &.animate-in {
    .module-title {
      animation: popIn 0.6s ease-out forwards;
    }
    
    .module-subtitle {
      animation: popIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
  }
}

@keyframes popIn {
  0% {
    transform: scale(0.95) translateY(40px);
    opacity: 0;
  }

  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}
</style>
